<template>
    <div>
      <el-container style="height: 100vh">
        <!-- 左侧列表 el-aside -->
        <el-aside class="el-menu" :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);height: 100%">    
          <el-menu :default-openeds="['1', '2']" style="min-height: 100%; overflow-x:hidden" :collapse="isCollapsed" background-color="rgb(48,65,86)"
            text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false" 
            router
            :default-active="this.$route.path">
            <div style="height: 40px; line-height: 40px; text-align: center">
              <img src="../assets/logo.png" alt=""
                style="width: 20px; height: 20px; position: relative; top: 5px; margin-right: 4px">
              <b style="color: white" v-show="!isCollapsed">智慧教培管理系统</b>
            </div>
  
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-document"></i>
                <span slot="title">教师信息</span>
              </template>
              <el-menu-item @click="queryTeachers" :default-active="$route.path">查询教师信息</el-menu-item>
            </el-submenu> 
  
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-document"></i>
                <span slot="title">导入导出</span>
              </template>
              <el-menu-item type="primary" @click="downloadTeachers" :default-active="$route.path">导出教师信息</el-menu-item>
            </el-submenu>
          </el-menu>
        
        </el-aside><!-- el-aside 左侧列表到此结束-->
  
        <el-container><!-- 中间查询学生信息-->
          <el-main>
            <div>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">返回首页</el-breadcrumb-item>
                <el-breadcrumb-item>教师信息</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
  
            <div>
  
              <div class="toolbar right">
                <el-row>
                  <el-col :span="18">
                    <el-input v-model="qname" placeholder="请输入姓名" clearable @clear="getStudentsList">
  
                      <el-button type="primary" slot="append" icon="el-icon-search" @click="getStudentsList"></el-button>
                    </el-input>
                  </el-col>
                </el-row>
              </div>
  
              <el-table empty-text="请点击查询，查询数据" :data="teachers" v-loading="loading"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="tid" label="工号" width="80"></el-table-column>
                <el-table-column prop="tname" label="姓名" width="100"></el-table-column>
                <el-table-column prop="tage" label="年龄" width="100"></el-table-column>
                <el-table-column prop="tsex" label="性别" width="100"></el-table-column>
  
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                      @click="deleteTeacher(scope.row)">删除</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogVisible = true">添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
  
              <div class="pagination-container">
                <el-pagination @size-change="changePageSize" @current-change="changePage" :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 500]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
  
            <!-- 添加学生对话框 -->
            <el-dialog :visible="dialogVisible">
              <AddTeacher v-bind:dialogVisible="dialogVisible" @closeDialog="closeDialog" />
            </el-dialog>
  
            <!-- 编辑框 -->
            <el-dialog title="编辑教师" :visible.sync="dialogFormVisible">
              <el-form :model="editTeacher">
                <el-form-item label="姓名">
                  <el-input v-model="editTeacher.tname" style="width: 70%"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                  <el-input v-model="editTeacher.tage" style="width: 70%"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-input v-model="editTeacher.tsex" style="width: 70%"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEditTeacher">确定</el-button>
              </div>
            </el-dialog>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script>
  
  import AddTeacher from './AddTeacher.vue'; // 引入添加学生子组件
  export default {
    name: 'Teacher', // 父组件的名称
    components: {
    AddTeacher // 注册子组件
    },
    data() {
      return {
  
        qname: '',
        total: 0,
        editTeacher: {},
        teachers: [],
        totalPages: 0,
        currentPage: 1,
        pageSize: 10,
        loading: false,
        dialogVisible: false,// 控制添加学生对话框的显示/隐藏
        dialogFormVisible: false,// 控制编辑学生对话框的显示/隐藏
        searchText: "",
  
      }
    },
    created() {
      this.queryTeachers();
      this.editTeacher = {
        tid: null,
        tname: "",
        tage: "",
        tsex: "",
      }
    },
    computed: {
      showPagination() {
        return this.totalPages > 1
      }
    },
    methods: {
      async closeDialog(isAdd) {
        this.dialogVisible = false
        if (isAdd == true) {
          if (this.total % this.pageSize == 0) {
            this.currentPage = this.currentPage + 1;
          }
          this.queryTeachers();
        }
      },
      async selectPageSize() {
        this.queryTeachers();
      },
      async changePageSize(size) {
        this.pageSize = size;
        this.queryTeachers()
      },
      async queryTeachers() {
        this.loading = true;
        try {
          const response = await this.$axios({
            url: '/getTeachers',
            params: {
              page: this.currentPage,
              pageSize: this.pageSize,
  
            }
          })
          const { data, totalPages, total } = response.data;
          this.total = total;
          this.teachers = data;
          this.totalPages = totalPages;
  
        } catch (error) {
          console.log(error);
        } finally {
          this.loading = false;
        }
      },
      async downloadTeachers() {
        try {
          const response = await this.$axios.get('/downloadTeachers', { responseType: 'blob' });
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', '教师信息表.xlsx');
          document.body.appendChild(link);
          link.click();
        } catch (error) {
          console.log(error);
        }
      },
      async changePage(currentPage) {
        this.currentPage = currentPage;
        await this.queryTeachers();
      },
      async deleteTeacher(teacher) {
        try {
          await this.$confirm(`确认删除工号为 ${teacher.tid} 的教师信息吗？`, '删除学生信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
          await this.$axios.delete(`/deleteTeacher/${teacher.tid}`);
          this.$message.success('删除成功');
          if (this.total % this.pageSize == 1) {
            this.currentPage = this.currentPage - 1;
          }
          this.queryTeachers();
        } catch (error) {
          console.log(error);
          this.$message.error('删除失败');
          this.queryTeachers();
        }
      },
      //编辑
      handleEdit(row) {
        this.dialogFormVisible = true;
        Object.assign(this.editTeacher, row); // 克隆当前行数据
      },
      //提交编辑
      handleEditTeacher() {
        this.$axios.put(`/editTeacher`, {
          tid: this.editTeacher.tid,
          tname: this.editTeacher.tname,
          tage: this.editTeacher.tage,
          tsex: this.editTeacher.tsex
        }).then(response => {
          const { code, message } = response.data;
          if (code === 200) {
            this.dialogFormVisible = false;// 隐藏编辑页面
            this.$message({
              message: "修改成功",
              type: 'success'
            });
            this.queryTeachers();
          } else {
            this.$message.error(message);
          }
        }).catch(error => {
          console.log(error);
          // this.$message.error('修改失败');
        });
      },
      async getTeachersList() {
        const response = await this.$axios({
          url: '/getTeachersList',
          params: {
            page: this.currentPage - 1,
            pageSize: this.pageSize,
            name: this.qname
          }
        })
        const { data, totalPages, total } = response.data;
        this.total = total;
        this.teachers = data
        this.totalPages = totalPages;
  
        if (response.status === 200 && response.data.code === 0)
          return this.$message.error(response.msg)
        this.$message({
          message: "查询成功",
          type: 'success'
        })
      }
    }
  }
  </script>
  <style src="@/style/student.css">
  
  </style> 
  